<template>
  <div class="contantbox">
    <!-- <head-nav></head-nav> -->
    <div class="djs">
      {{tpdjs}}
    </div>
    <!-- 排行榜 -->
    <div class="pmbox">
      <div class="pm-t">
        <img src="../../assets/img/photo-sspm.png" alt="">
      </div>
      <div class="pm-list">
        <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <table cellspacing="0" cellpadding="0">
          <thead>
            <tr>
              <th>排名</th>
              <th><span class="line"></span>参赛选手<span class="line"></span></th>
              <th>票数</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in listdata" :key="index">
              <td>
                <div class="rankNum">{{index+1}}</div>
              </td>
              <td><img class="headImg" :src="item.TX">
                <div class="playerName">{{item.XM}}</div>
              </td>
              <td class="voteNum">{{item.TPS}}<span class="scoreUnit">票</span></td>
            </tr>
          </tbody>
        </table>
        <div class="loading">
            <div v-if="loading">
              加载中...
            </div>
            <div v-else>
              没有数据了
            </div>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
import { Toast } from "mint-ui";
export default {
  // props: ["resobj"],
  data() {
    return {
      resobj:{},
      tpdjs: "",
      listdata: [],
      row: 10,
      page: 1,
      type: 2,
      nextapi: true,
      keyword: "",
      loading: true,
      userid:'',
    };
  },
  methods: {
    //加载更多...
    loadMore() {
      let that = this;
      that.page = that.page + 1;
      let type = this.type;
      let row = this.row;
      let page = this.page;
      let search = this.keyword;
      let hdId = this.resobj.ID;
      if (this.nextapi) {
        this.loading = true;
        that.getlist(that, type, row, page, search, hdId);
      }
    },
    //全局设置数据请求
    getqjset(that, userid) {
      api.getActiveIndex(that, userid, function(res) {
        let data = res.data;
        console.log(data, "晒照片全局设置");
        if (data.code == 0) {
          that.resobj = data.data;
          // 获取列表
          let type = that.type;
          let row = that.row;
          let page = that.page;
          let search = "";
          let hdId = that.resobj.ID;
          that.getlist(that, type, row, page, search, hdId);
          that.newdjsfn();
        } else {
          that.Toastfn(data.msg, 2000, "");
        }
      });
    },
    // 获取列表
    getlist(that, type, row, page, search, hdId) {
      api.getPhotoList(that, type, row, page, search, hdId, function(res) {
        let data = res.data;
        console.log(data, "晒照片-列表");
        if (data.code == 0) {
          if (data.data.length != 0) {
            //有数据
            that.listdata = that.listdata.concat(data.data);
          } else {
            //没数据
            that.nextapi = false;
          }
        } else {
          that.Toastfn(data.msg, 2000, "");
        }
        that.loading = false; //关闭loading
      });
    },
    // 倒计时
    newdjsfn() {
      let that = this;
      let nowtime = Date.parse(new Date());
      var kstime = Date.parse(new Date(this.resobj.BMKSSJ.replace(/-/g,'/')));
      var jstime = Date.parse(new Date(this.resobj.BMJSSJ.replace(/-/g,'/')));
      console.log(nowtime, kstime, jstime);

      if (nowtime < kstime) {
        that.tpdjs = "活动还未开始";
      } else if (nowtime > jstime) {
        that.tpdjs = "活动已经结束";
      } else {
        // console.log("活动运行中");
        countDown((jstime - nowtime) / 1000);
      }
      // 投票倒计时
      function countDown(times) {
        var sytime = "";
        djsdm();
        that.timer = setInterval(function() {
          djsdm();
        }, 1000);

        function djsdm() {
          var day = 0,
            hour = 0,
            minute = 0,
            second = 0; //时间默认值
          if (times > 0) {
            day = Math.floor(times / (60 * 60 * 24));
            hour = Math.floor(times / (60 * 60)) - day * 24;
            minute = Math.floor(times / 60) - day * 24 * 60 - hour * 60;
            second =
              Math.floor(times) -
              day * 24 * 60 * 60 -
              hour * 60 * 60 -
              minute * 60;
          }
          // if (day <= 9) day = "0" + day;
          // if (hour <= 9) hour = "0" + hour;
          // if (minute <= 9) minute = "0" + minute;
          if (second <= 9) second = "0" + second;
          sytime = day + "天" + hour + "小时" + minute + "分钟" + second + "秒";
          that.tpdjs = "活动倒计时：" + sytime;
          // console.log(sytime);
          // console.log("剩余时间s：" + times);
          if (times < 0) {
            clearInterval(that.timer);
            that.tpdjs = "活动已经结束";
          }
          times--;
        }
      }
    },
    // 提示函数
    Toastfn(message, duration, position) {
      Toast({
        message: message,
        duration: duration,
        position: position
      });
    }
  },
  mounted() {
    let that = this;
    var userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    if (userinfo && userinfo.vipcode) {
      let userid = userinfo.vipcode;
      this.userid = userid;
    } else {
      Toast({
        message: "您还不是会员，快去注册吧！",
        duration: 1600
      });
      setTimeout(function() {
        that.$router.push({ path: "/register", query: { type: "sign" } });
      }, 1600);
      return false;
    }
    localStorage.setItem("footnavselected", 1);
    this.getqjset(that, this.userid); //获取全局设置信息
    this.tpdjs = "活动还未开始";
    this.$emit("footnavzt", true); //显示底部导航
  }
};
</script>

<style scoped lang="less">
.contantbox {
  padding: 0.2rem;
  padding-bottom: 88px;
  .djs {
    line-height: 0.7rem;
    font-size: 0.32rem;
    border-radius: 0.1rem;
    background: rgba(0, 0, 0, 0.25);
    text-align: center;
    color: #ffffff;
    margin-top: 0.4rem;
  }
  .pmbox {
    .pm-t {
      text-align: center;
      margin-top: 0.4rem;
      img {
        background-color: transparent;
        width: 65%;
        display: inline-block;
      }
    }
    .pm-list {
      background-color: #ffffff;
      padding-top: 0.5rem;
      margin-top: -0.45rem;
    }
  }
}
// 表格
table {
  width: 100%;
  border-collapse: collapse;
  thead {
    width: 100%;
    height: 0.7rem;
    line-height: 0.7rem;
    font-size: 0.3rem;
    color: #666;
    background-color: #f9f9f9;
    th:nth-child(1) {
      width: 1.8rem;
    }
    th:nth-child(2) {
      position: relative;
    }
    th:nth-child(3) {
      width: 1.9rem;
    }
  }
  tbody {
    tr {
      height: 1.2rem;
      line-height: 1.2rem;
      border-bottom: 0.01rem solid #f3f3f3;
      td {
        position: relative;
      }
      .headImg {
        width: 0.8rem;
        height: 0.8rem;
        position: absolute;
        left: 0.15rem;
        top: 0.18rem;
        border-radius: 50%;
      }
      .playerName {
        width: 2.2rem;
        color: #999;
        word-wrap: break-word;
      }
      .voteNum {
        color: #ff4040;
        font-size: 0.32rem;
        text-align: center;
      }
      .rankNum {
        width: 100%;
        height: 0.8rem;
        line-height: 0.7rem;
        color: #666;
        font-size: 0.32rem;
        text-align: center;
        background-size: 0.6rem 0.7rem;
        background-position: center;
        background-repeat: no-repeat;
      }
    }
    tr:nth-child(1) .rankNum {
      color: #fff;
      background-image: url(../../assets/img/photo-first.png);
    }
    tr:nth-child(2) .rankNum {
      color: #fff;
      background-image: url(../../assets/img/photo-second.png);
    }
    tr:nth-child(3) .rankNum {
      color: #fff;
      background-image: url(../../assets/img/photo-third.png);
    }
    td:nth-child(2) {
      padding-left: 1.2rem;
      line-height: 0.4rem;
      text-overflow: ellipsis;
      white-space: normal;
      overflow: hidden;
      font-size: 0.3rem;
    }
  }
}
.loading {
  text-align: center;
  padding: 20px;
  color: #666666;
}
</style>
